<template>
	<view class="ray-list content">
		<view class="ray-list__header fixed">
			<wuc-tab :tab-list="tabList" :tabCur.sync="nodeType" tab-class="tabs" select-class="tab-selected" textFlex @change="tabChange"></wuc-tab>
		</view>
		<view class="ray-list__body list-panel" style="margin-top: 76rpx;">
			<view class="list-view">
				<view class="nav_item" v-if="nodeType == 0">
					<!-- 进行中 -->
					<view class="finish" v-if="task.doing && task.doing.length > 0">进行中</view>
					<view v-if="task.doing && task.doing.length > 0" :class="['border']">
						<view class="box_item" v-for="(item, i) in getDoingList" :key="i">
							<image :src="item.taskImgUrl"></image>
							<view class="title">
								<view class="taskNameClass">获得{{ item.medalName + item.medalLevelName }}勋章</view>
								<view class="subTitle">{{ item.taskName || '' }}</view>
							</view>
							<view class="btn btn_finish">
								<button @click="todoTask(item)" style="background: rgba(250, 204, 107, 0.5);color: rgba(102, 100, 93, 0.7);">进行中</button>
								<view v-if="item.taskActionVos.length === 1 && item.taskActionVos[0].actionCount > 1" class="bar">
									<view class="num">{{ item.taskActionVos[0].doneCount }}/{{ item.taskActionVos[0].actionCount }}</view>
									<view class="progress">
										<view
											class="progress-inner"
											:style="{ transform: `scaleX(${item.taskActionVos[0].doneCount / item.taskActionVos[0].actionCount})` }"
										></view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="task.doing.length > 3" class="model-footer" style="padding: 9rpx 0 32rpx 0;background: rgba(255, 255, 255, 0)">
						<view @click="doingFlag = !doingFlag" class="model-toggle" :class="{ expand: doingFlag }">{{ doingFlag ? '收起' : '展开' }}</view>
					</view>

					<!-- <view class="split-line"  v-if="task.doing && task.doing.length > 0"></view> -->
					<view class="finish" v-if="task.todo && task.todo.length > 0">去完成</view>
					<view v-if="task.todo && task.todo.length > 0" :class="['border']">
						<!-- 去完成 -->
						<view class="box_item" v-for="(item, i) in getTodoList" :key="i">
							<image :src="item.taskImgUrl"></image>
							<view class="title">
								<view class="taskNameClass">获得{{ item.medalName + item.medalLevelName }}勋章</view>
								<view class="subTitle">{{ item.taskName || '' }}</view>
							</view>
							<view class="btn btn_finish">
								<button @click="goComplete(item)" style="background: rgba(250, 204, 107, 1);color: rgba(102, 100, 93, 0.7);">去完成</button>
							</view>
						</view>
					</view>

					<view v-if="task.todo.length > 3" class="model-footer" style="padding: 9rpx 0 32rpx 0;background: rgba(255, 255, 255, 0)">
						<view @click="todoFlag = !todoFlag" class="model-toggle" :class="{ expand: todoFlag }">{{ todoFlag ? '收起' : '展开' }}</view>
					</view>
					<!-- 已完成 -->
					<!-- <view class="split-line" v-if="task.todo && task.todo.length > 0"></view> -->
					<view class="finish" v-if="task.done && task.done.length > 0">已完成</view>
					<view v-if="task.done && task.done.length > 0" :class="['border', { doneFlag: !doneFlag }]">
						<view class="box_item" v-for="(item, i) in getDoneList" :key="i">
							<image :src="item.taskImgUrl"></image>
							<view class="title">
								<view class="taskNameClass">获得{{ item.medalName + item.medalLevelName }}勋章</view>
								<view class="subTitle">{{ item.taskName || '' }}</view>
							</view>
							<view @click="todoTask(item)" class="btn btn_finish"><button>已完成</button></view>
						</view>
					</view>
					<view v-if="task.done.length > 3" class="model-footer" style="padding: 9rpx 0 32rpx 0;background: rgba(255, 255, 255, 0)">
						<view @click="doneFlag = !doneFlag" class="model-toggle" :class="{ expand: doneFlag }">{{ doneFlag ? '收起' : '展开' }}</view>
					</view>
				</view>

				<view class="nav_item classRoom" v-if="nodeType == 1">
					<view class="classTab" style="min-height: calc(100vh - 100rpx);background-color: #fff;">
						<view class="have_model_title">已获得勋章</view>
						<view class="have_model" :class="{ collapse: !cardFlag }" v-if="modelList.length > 0">
							<view class="model_img">
								<view v-for="(item, index) in getCardList" :key="index" class="model_item" :class="{ shadow: !item.noShadow }" @click="make(item, true)">
									<image :src="item.medalImgUrl" mode="aspectFill"></image>
									<view class="title-sub">{{ item.medalName || '' }}</view>
								</view>
							</view>
						</view>

						<view class="no-model" v-else>
							<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/empty_list.png"></image>
							<view class="title">什么也没有，快去获取勋章吧!</view>
						</view>

						<view v-if="modelList.length > 8" class="model-footer" style="padding-bottom: 0rpx;">
							<view @click="cardFlag = !cardFlag" class="model-toggle" :class="{ expand: cardFlag }">{{ cardFlag ? '收起' : '展开' }}</view>
						</view>
						<view class="cloud"><image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/lines.png"></image></view>
						<view class="have_model_title" style="padding-top: 0rpx;">勋章墙</view>
						<view class="have_model" :class="{ collapse1: !cardFlag1 }">
							<view v-for="(item, index) in getCardList1" :key="index" class="model_item shadow" @click="make(item, false)">
								<image :src="item.medalImgUrl" class="gray" mode="aspectFit"></image>
								<view class="title-sub">{{ item.medalName || '' }}</view>
							</view>
						</view>

						<view v-if="notModelList.length > 12" class="model-footer">
							<view @click="cardFlag1 = !cardFlag1" class="model-toggle" :class="{ expand: cardFlag1 }">{{ cardFlag1 ? '收起' : '展开' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-calendar
			:insert="false"
			:showMonth="false"
			ref="calendar"
			:lunar="false"
			:selected="selected"
			:isToday="isToday"
			endDate="2099-12-31"
			:num="numToday"
			@fatherMethod="getData"
		></uni-calendar>
		<uni-popup ref="popup" type="center" style="z-index:999;">
			<uni-popup-model :modelList.sync="modelListA" ></uni-popup-model>
		</uni-popup>
		<popup-task ref="taskModule" @toFinish="goComplete"></popup-task>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup-scroll.vue';
import PopupTask from '@/components/uni-popup/popup-task.vue';
import uniPopupModel from '@/components/uni-popup/uni-popup-model.vue';
import uniCalendar from '@/components/uni-calendar-other/uni-calendar.vue';
import { mapState } from 'vuex';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	components: {
		PopupTask,
		uniPopup,
		uniPopupModel,
		uniNavBar,
		uniIcons,
		uniCalendar
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo, location: state => state.location, currentHouse: state => state.currentHouse }),
		getDoingList() {
			return this.doingFlag ? this.task.doing : this.task.doing.slice(0, 3);
		},
		getTodoList() {
			return this.todoFlag ? this.task.todo : this.task.todo.slice(0, 3);
		},
		getDoneList() {
			return this.doneFlag ? this.task.done : this.task.done.slice(0, 3);
		},
		getCardList() {
			return this.cardFlag ? this.modelList : this.modelList.slice(0, 8);
		},
		getCardList1() {
			return this.cardFlag1 ? this.notModelList : this.notModelList.slice(0, 12);
		}
	},
	onShow() {
		this.getData();
	},
	data() {
		return {
			doingFlag: false,
			todoFlag: false,
			doneFlag: false,
			flag: false,
			isActive: 1,
			percentCount: 0,
			taskList: [],
			modelList: [],
			notModelList: [],
			classList: [],
			customerId: '',
			selected: [],
			isToday: false,
			name: '',
			cardFlag: false,
			cardFlag1: false,
			img: '',
			medalType: 0,
			modelListA: [],
			specialCont: '',
			tabList: [
				{
					name: '任务',
					status: 1
				},
				{
					name: '勋章',
					status: 2
				}
			],
			nodeType: 0,
			task: { todo: [], doing: [], done: [] },
			numToday: 0
		};
	},
	components: {
		uniPopup,
		uniPopupModel,
		uniNavBar,
		uniIcons,
		uniCalendar,
		PopupTask
	},
	onPullDownRefresh() {
		this.getData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		reset() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.task = { todo: [], doing: [], done: [] };
		},
		popTask(data) {
			// this.$refs.slient.open();
			this.$refs.task.open();
		},
		tabChange(index) {
			this.nodeType = index;
			this.reset();
			this.getData();
		},
		getSignData() {
			http('/api/sysCheckDetails/checkList', {
				method: 'GET'
			}).then(result => {
				if (result.code == 200) {
					let arr = [];
					this.numToday = result.data.num;
					result.data.data.map(item => {
						arr.push({
							date: item.check_time_str,
							nowFlag: item.nowFlag
						});
					});
					this.selected = arr;
					this.selected.map(item => {
						if (item.nowFlag == 0) {
							this.isToday = true;
						}
					});
				} else {
				}
			});
		},
		clickLeft: function() {
			uni.navigateTo({
				url: '/home/index',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		getData() {
			const { tabList, nodeType } = this;
			if (tabList[nodeType].status == 1) {
				//调用获取任务接口
				http('/api/sysMedalTask/taskList', { method: 'GET' }).then(result => {
					this.task = result.data || { doing: [], todo: [], done: [] };
				});
			} else {
				Promise.all([
					new Promise(resolve => {
						http('/api/cusUserInfo/getSysMedalGrantDetail', { data: {}, method: 'GET' }).then(result => {
							let data = result.data || [];
							resolve(data);
						});
					}),
					new Promise(resolve => {
						http('/api/cusUserInfo/getSysMedalGrantInfoNotAvailable', { data: {}, method: 'GET' }).then(result => {
							let data = result.data || [];
							resolve(data);
						});
					})
				]).then(res => {
					const [cardList, cardList1] = res;
					this.notModelList = [...cardList1];
					const cardListLength = cardList.length;
					if (cardListLength < 8) {
						this.modelList = [...cardList, ...this.getFixedMedal(8 - cardListLength)];
					} else {
						this.modelList = [...cardList, ...this.getFixedMedal(4 - (cardListLength % 4))];
					}
				});
			}
		},
		getFixedMedal(length) {
			const list = [];
			while (length--) {
				list.push({
					noShadow: true,
					medalName: '',
					medalImgUrl: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/empty_medal.png'
				});
			}
			return list;
		},
		person() {
			uni.navigateTo({
				url: '../../community/heartList/personDetail',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		make(cont, tag) {
			if (!cont.medalId) {
				return;
			}
			this.$refs.popup.open();
			let name = cont.medalName
			http('/api/sysMedalTask/medal/' + cont.medalId, { data: {}, method: 'GET' }).then(
				result => {
					let data = result.data;
					if(tag) {
						const level = cont.medalLevel, currentLevels = [];
						data.forEach(item => {
							if (item.medalLevel <= level) {
								currentLevels.push(item)
								// this.modelListA = [item];
							}
						});
						this.modelListA = currentLevels;
					} else {
						this.modelListA = data
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		close() {
			this.flag = false;
		},
		updatTodo(medalTaskActionId) {
			http('/api/sysMedalTask/todoTask?medalTaskActionId=' + medalTaskActionId, { method: 'POST' }).then(result => {
				if (result.data.length > 0) {
				}
			});
		},
		goExplore(actionId, medalTaskActionId) {
			var url = '';
			if (actionId == 1) {
				//每日签到
				url = '../../personal/mySign';
			} else if (actionId == 2 || actionId == 5 || actionId == 6) {
				//报名活动 跳到活动主页
				uni.navigateTo({
					url: '../../pages/activity/index',
					animationType: 'pop-in',
					animationDuration: 200
				});
				return;
			} else if (actionId == 3) {
				//观看云课堂 跳云课堂主页
				url = '../../classRoom/index';
			} else if (actionId == 4) {
				//参与问卷 跳问卷列表页
				url = '../../interaction/surveyList?medalTaskActionId=' + medalTaskActionId;
				// url = '../../personal/message?medalTaskActionId=' + medalTaskActionId;
			} else if (actionId == 7) {
				//参与合伙人
				url = '../../card/index';
			} else if (actionId == 8) {
				//拉新
				url = '../../personal/share';
			}
			uni.navigateTo({
				url,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		todoTask(item) {
			if (item.taskActionVos.length > 1) {
				this.$refs.taskModule.open(item.taskActionVos, item.acceptTask);
			} else {
				this.goComplete(item);
			}
		},
		goComplete(item) {
			if (item.acceptTask == '0' || item.acceptTask == null) {
				//此任务，当前用户未接取
				http('/api/sysMedalTask/todoTask', {
					method: 'POST',
					data: {
						medalTaskActionId: item.medalTaskActionId,
						medalTaskId: item.medalTaskId
					}
				}).then(result => {
					if (result.code == 200) {
						if (item.actionId == 1) {
							//签到
							//弹出签到层
							this.getSignData();
							this.$refs.calendar.open();
						} else if (item.actionId == 2) {
							//报名活动
							//跳转活动列表
							//#ifdef MP-WEIXIN
							uni.switchTab({
								url: '../../pages/activity/index',
								animationType: 'pop-in',
								animationDuration: 200
							});
							//#endif
							//#ifdef H5
							uni.navigateTo({
								url: '../../pages/activity/activity',
								animationType: 'pop-in',
								animationDuration: 200
							});
							//#endif
						} else if (item.actionId == 3) {
							//观看云课堂
							//跳转云课堂
							uni.navigateTo({
								url: '../../home/classRoom/index',
								animationType: 'pop-in',
								animationDuration: 200
							});
						} else if (item.actionId == 4) {
							//参与问卷
							//跳转问卷列表
							uni.navigateTo({
								url: '../../interaction/surveyList?medalTaskActionId=' + item.medalTaskActionId,
								// url: '../../personal/message',
								animationType: 'pop-in',
								animationDuration: 200
							});
						} else if (item.actionId == 5 || item.actionId == 6) {
							//点赞
							//#ifdef MP-WEIXIN
							uni.switchTab({
								url: '../../pages/interaction/index',
								animationType: 'pop-in',
								animationDuration: 200
							});
							//#endif
							//#ifdef H5
							uni.navigateTo({
								url: '../../card/index',
								animationType: 'pop-in',
								animationDuration: 200
							});
							//#endif
						} else if (item.actionId == 7) {
							//参与合伙人
							//跳转
							uni.navigateTo({
								url: '../../home/returnHome/index',
								animationType: 'pop-in',
								animationDuration: 200
							});
						} else if (item.actionId == 8) {
							//跳转拉新
							console.log('---------拉新')
							uni.navigateTo({
								url: '../../personal/share',
								animationType: 'pop-in',
								animationDuration: 200
							});
						}
						this.getData();
					}
				});
			} else {
				//此任务，当前用户已接取过
				if (item.actionId == 1) {
					//签到
					//弹出签到层
					this.getSignData();
					this.$refs.calendar.open();
				} else if (item.actionId == 2) {
					//报名活动
					//跳转活动列表
					//#ifdef MP-WEIXIN
					uni.switchTab({
						url: '../../pages/activity/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
					//#ifdef H5
					uni.navigateTo({
						url: '../../pages/activity/activity',
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				} else if (item.actionId == 3) {
					//观看云课堂
					//跳转云课堂
					uni.navigateTo({
						url: '../../home/classRoom/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
				} else if (item.actionId == 4) {
					//参与问卷
					//跳转问卷列表
					uni.navigateTo({
						url: '../../interaction/surveyList?medalTaskActionId=' + item.medalTaskActionId,
						// url: '../../personal/message',
						animationType: 'pop-in',
						animationDuration: 200
					});
				} else if (item.actionId == 5 || item.actionId == 6) {
					//评论
					//跳转评论页面
					//点赞
					//#ifdef MP-WEIXIN
					uni.switchTab({
						url: '/pages/interaction/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
					//#ifdef H5
					uni.navigateTo({
						url: '../../card/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				} else if (item.actionId == 7) {
					//参与合伙人
					//跳转参与合伙人
					uni.navigateTo({
						url: '../../home/returnHome/index',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}	else if (item.actionId == 8) {
					//跳转拉新
					uni.navigateTo({
						url: '../../personal/share',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.mask_bg {
	width: 670rpx !important;
}

.collapse {
	// height: 320rpx !important;
	overflow: hidden;
}
.collapse1 {
	// height: 480rpx !important;
	overflow: hidden;
}
.cloud {
	// height: 100rpx;
	padding-bottom: 24rpx;
	padding-top: 32rpx;
	background: #fff;
	image {
		width: 100%;
		height: 100rpx;
	}
}

.model-footer {
	text-align: center;
	background: #fff;
	padding: 36rpx 0;
	.model-toggle {
		text-align: center;
		font-size: 22rpx;
		font-weight: 400;
		color: #8a8c8d;
		line-height: 34rpx;
		padding-right: 30rpx;
		display: inline-block;
		background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/pulldown_icon.png) no-repeat center right;
		background-size: 20rpx 23rpx;
	}

	.expand {
		background-image: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/pullup_icon.png) !important;
	}
}
.nav_item {
	.split-line {
		height: 24rpx;
		background-color: #ffffff;
	}
	.finish {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #66645d;
		line-height: 42rpx;
		padding: 23rpx 0rpx 0rpx 40rpx;
	}
	.border {
		padding: 23rpx 40rpx;
		.box_item {
			display: flex;
			background: #fff;
			border-radius: 20rpx;
			align-items: center;
			padding: 11rpx 24rpx;
			box-sizing: border-box;
			margin-bottom: 23rpx;
			&:last-child {
				margin-bottom: 0;
			}
			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				margin-right: 24rpx;
			}
			.btn {
				position: relative;
				button {
					width: 120rpx;
					height: 50rpx;
					background-color: #facc6b;
					color: #66645d;
					font-size: 24rpx;
					border-radius: 12rpx;
					border: none;
					line-height: 50rpx;
					padding: 0rpx;
					margin: 0rpx;
				}
			}
			.btn_finish {
				button {
					background: rgba(102, 100, 93, 0.1);
					color: rgba(102, 100, 93, 0.3);
					font-weight: linght;
					// color: #fd8008;
				}
			}
			.title {
				width: 408rpx;
				font-size: 26rpx;
				color: #66645d;
			}
			.subTitle {
				font-size: 24rpx;
				font-weight: 400;
				color: #8a8c8d;
				line-height: 33rpx;
			}
			.taskNameClass {
				font-size: 26rpx;
				font-weight: 500;
				color: #66645d;
				line-height: 37rpx;
			}
		}
	}

	.classTab {
		width: 100%;
		margin-top: 23rpx;
		.have_model_title {
			font-size: 36rpx;
			color: #66645d;
			background: #fff;
			padding: 24rpx 40rpx;
			line-height: 50rpx;
		}
		.have_model {
			background: #fff;
			padding: 0 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.model_img {
				display: flex;
				width: 100%;
				justify-content: flex-start;
				flex-wrap: wrap;
				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}
			}
			.model_item {
				width: 25%;
				font-size: 26rpx;
				color: #66645d;
				text-align: center;
				margin-bottom: 30rpx;
				&.shadow {
					background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/medal_shadow.png) center no-repeat;
					background-size: auto 100%;
				}
				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}
				.text {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.title-sub {
					font-size: 20rpx;
					color: #66645d;
					margin-top: 10rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					padding: 0 12rpx;
				}
			}
		}
		.no-model {
			text-align: center;
			image {
				width: 300rpx;
				height: 170rpx;
			}
			.title {
				margin-top: 12rpx;
				font-size: 28rpx;
				color: #8a8c8d;
			}
		}
		.model_wale {
			margin-top: 24rpx;
			background: #fff;
			padding: 21rpx 28rpx;
		}
	}
}
.classRoom {
	display: flex;
}

.active {
	position: relative;
	color: #66645d;
}

.active::after {
	content: '';
	position: absolute;
	width: 40rpx;
	height: 6rpx;
	border-radius: 8rpx;
	background-color: #66645d;
	left: 0rpx;
	right: 0rpx;
	bottom: 0rpx;
	margin: auto;
}

.bar {
	position: absolute;
	right: 0;
	transform: scale(0.5);
	transform-origin: top right;
	display: flex;
	align-items: center;
	justify-content: center;
	.num {
		font-size: 32rpx;
		color: #8a8c8d;
		margin-right: 12rpx;
	}
	.progress {
		height: 8rpx;
		border-radius: 8rpx;
		width: 240rpx;
		background-color: rgba(102, 100, 93, 0.2);
		.progress-inner {
			width: 100%;
			height: 8rpx;
			background-color: rgba(250, 204, 107, 1);
			transform: scaleX(0.5);
			transform-origin: left center;
		}
	}
}
</style>
